<!-- 
	装修页：动态组件
	注：小程序暂不支持动态组件写法
	props:
		datas: 接口下发的组件数据
	
	action:
		getComponent:根据组件id获取对应组件 枚举说明：./type/componentType.js
-->
<template>
    <view class="">
        <!-- 小程序暂不支持动态组件写法 -->
        <!-- <component
			v-for="(item,index) in datas" 
			:is="getComponent(item.id)" 
			:data="item" 
			:key="index"
			@searchFn="searchFn"
			@goSearch="goSearch"
		></component> -->
        <view v-for="(item, index) in datas" :key="index">
            <dynamic-search-bar v-if="item.Widget == 'widget-search'" :data="item.Setting" @searchFn="searchFn"
                @goSearch="goSearch"></dynamic-search-bar>
            <dynamic-banner v-if="item.Widget == 'widget-banner'" :data="item.Setting"
                @bannerClick="bannerClick"></dynamic-banner>
            <dynamic-notice v-if="item.Widget == 'widget-notice'" :data="item.Setting"
                @noticeClick="noticeClick"></dynamic-notice>
            <dynamic-space v-if="item.Widget == 'widget-space'" :data="item.Setting"></dynamic-space>
            <dynamic-title v-if="item.Widget == 'widget-title'" :data="item.Setting"></dynamic-title>
            <dynamic-menu v-if="item.Widget == 'widget-menulist'" :data="item.Setting"
                @menuClick="menuClick"></dynamic-menu>
            <dynamic-goods-list v-if="item.Widget == 'widget-goodslist'" :data="item.Setting"></dynamic-goods-list>
            <dynamic-editor v-if="item.Widget == 'widget-editor'" :data="item.Setting"></dynamic-editor>
            <dynamic-ad-list v-if="item.Widget == 'widget-adlist'" :data="item.Setting"
                @adClick="adClick"></dynamic-ad-list>
            <dynamic-text v-if="item.Widget == 'widget-text'" :data="item.Setting"></dynamic-text>
            <dynamic-line v-if="item.Widget == 'widget-line'" :data="item.Setting"></dynamic-line>
        </view>
    </view>
</template>

<script>
import storage from "@/uni-sub-base/utils/storage.js"
import DynamicSearchBar from "@/uni-sub-base/components/dynamic/dynamic-search-bar.vue"
import DynamicBanner from "@/uni-sub-base/components/dynamic/dynamic-banner.vue"
import DynamicNotice from "@/uni-sub-base/components/dynamic/dynamic-notice.vue"
import DynamicSpace from "@/uni-sub-base/components/dynamic/dynamic-space.vue"
import DynamicTitle from "@/uni-sub-base/components/dynamic/dynamic-title.vue"
import DynamicMenu from "@/uni-sub-base/components/dynamic/dynamic-menu.vue"
import dynamicGoodsList from "@/uni-sub-base/components/dynamic/dynamic-goods-list.vue"
import dynamicEditor from "@/uni-sub-base/components/dynamic/dynamic-editor.vue"
import dynamicAdList from "@/uni-sub-base/components/dynamic/dynamic-ad-list.vue"
import dynamicText from "@/uni-sub-base/components/dynamic/dynamic-text.vue"
import dynamicLine from "@/uni-sub-base/components/dynamic/dynamic-line.vue"
export default {
    components: {
        "dynamic-search-bar": DynamicSearchBar,
        "dynamic-banner": DynamicBanner,
        "dynamic-notice": DynamicNotice,
        "dynamic-space": DynamicSpace,
        "dynamic-title": DynamicTitle,
        "dynamic-menu": DynamicMenu,
        "dynamic-goods-list": dynamicGoodsList,
        "dynamic-editor": dynamicEditor,
        "dynamic-ad-list": dynamicAdList,
        "dynamic-text": dynamicText,
        "dynamic-line": dynamicLine,
    },
    props: {
        datas: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            h5BasePath: "/pages/web/h5?url=",
        }
    },
    methods: {
        //获取对应组件
        getComponent(id) {
            return "dynamic-search-bar"
        },
        //搜索回调
        searchFn(key) { },
        //去搜索
        goSearch() {
            this.easyGoTo("/pages_shop/packet/search/index")
        },
        //点击公告
        noticeClick(item) {
            this.easyGoTo("/pages_me/packet/message/newsDetails?id=" + item.ID)
        },
        //点击轮播图
        bannerClick(item) {
            this.clickFn(item)
        },
        //点击广告图
        adClick(item) {
            this.clickFn(item)
        },
        menuClick(item) {
            this.clickFn(item)
        },
        clickFn(item) {
            if (!item || !item.Value) {
                return
            }
            if (item.Type == "custom") {
                //自定义跳转
                if (item.Value.includes("http")) {
                    //进入网页
                    this.easyGoTo(this.getH5Url(item.Value))
                } else {
                    //原生路由页面
                    this.easyGoTo(item.Value)
                }
            } else if (item.Type == "product-category") {
                //商品分类
                this.easyGoTo("/pages_shop/packet/product/productClass?typeId=" + item.Value)
            } else if (item.Type == "user-center") {
                //个人中心
                this.easyGoTo("/pages/me/index")
            } else if (item.Type == "product-list") {
                //商品列表
                this.easyGoTo("/pages/product/index")
            } else if (item.Type == "order-list") {
                //订单列表
                this.easyGoTo("/pages/order/index")
            } else if (item.Type == "shopping-cart") {
                //购物车
                this.easyGoTo("/pages/cart/index")
            } else if (item.Type == "product-tagid") {
                //商品标签
                let tagId = item.Value.replace("sid:", "")
                storage.setCache("productTagId", tagId)
                this.$nextTick(() => {
                    this.easyGoTo("/pages/product/index")
                })
            }
        },
        getH5Url(url) {
            return this.h5BasePath + url
        },
    },
}
</script>

<style lang="scss" scope></style>
